
<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="平面图管理" name="first">
        <div>
          <div style="border-bottom:1px solid #22ffff;padding:10px 0">
            <el-button @click="newimg" class="btntable2">新&nbsp;&nbsp;&nbsp;增</el-button>
          </div>
          <div class="demo-image__placeholder">
            <div
              class="block"
              v-for="(item, index) in imgList"
              :key="index"
              @click="gopicpoint(item.id)"
            >
              <span class="demonstration">{{item.regionName}}</span>
              <el-image :src="item.imgpath" fit="contain" style="height:160px;width:100%"></el-image>
              <div class="btncontent">
                <span class="btnclass" @click.stop="editimg(item)">修改</span>
                <span class="btnclass" @click.stop="deleteimg(item.id)">删除</span>
              </div>
            </div>
          </div>
          <el-dialog title="新增" :visible.sync="showadd" width="50%" center>
            <el-form labelWidth="150px">
              <el-form-item label="名称" class="is-required">
                <el-input placeholder="请输入" v-model="imgname" style="width:90%"></el-input>
              </el-form-item>
              <el-form-item label="上传图片" class="is-required">
                <upload tn="img" localfiletype="02" :imagefile="filedata" :isupload="1">选择文件</upload>
                <el-image
                  :src="filedata.img"
                  fit="contain"
                  style="height:100px"
                  v-if="filedata.img"
                ></el-image>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer pbtn">
              <!-- <el-button class="btntable3" @click="showadd = false">取 消</el-button> -->
              <span class="btnclass" @click="showadd = false">取 消</span>
              <span
                class="btnclass"
                @click="newimg2"
                style="margin-bottom:33%;display:inline-block;margin-left:30px"
              >新 增</span>
              <!-- <el-button class="btntable3"  @click="newimg2" style="margin-bottom:33%">上 传</el-button> -->
            </span>
          </el-dialog>
          <el-dialog title="修改" :visible.sync="showedit" width="50%" center>
            <el-form labelWidth="150px">
              <el-form-item label="名称" class="is-required">
                <el-input placeholder="请输入" v-model="editdata.regionName"></el-input>
              </el-form-item>
              <el-form-item label="上传图片" class="is-required">
                <upload tn="img" localfiletype="02" :imagefile="editdata" :isupload="1">选择文件</upload>
                <el-image :src="editdata.img" fit="contain" style="height:100px"></el-image>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer pbtn">
              <!-- <el-button class="btntable2" @click="showedit = false">取 消</el-button>
              <el-button class="btntable2" type="primary" @click="saveeidt" style="margin-bottom:23%">保 存</el-button>-->
              <span class="btnclass" @click="showedit = false">取 消</span>
              <span
                class="btnclass"
                @click="saveeidt"
                style="margin-bottom:33%;display:inline-block;margin-left:30px"
              >保 存</span>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="排班管理" name="second">
                  <div style="border-bottom:1px solid #22ffff;padding:10px 0">
            <el-button  class="btntable2">新&nbsp;&nbsp;&nbsp;增</el-button>
            <el-button  class="btntable2">修&nbsp;&nbsp;&nbsp;改</el-button>
          </div>
        <div style="border-bottom:1px solid #22ffff;padding:10px 0">
          <el-table class="tablecolor" :data="tableData" style="width: 100%">
            <el-table-column prop="time" label="周数"  width="300">
            </el-table-column>
            <el-table-column prop="name" label="星期一" ></el-table-column>
            <el-table-column prop="name" label="星期二" ></el-table-column>
            <el-table-column prop="name" label="星期三" ></el-table-column>
            <el-table-column prop="name" label="星期四" ></el-table-column>
            <el-table-column prop="name" label="星期五" ></el-table-column>
            <el-table-column prop="name" label="星期六" ></el-table-column>
            <el-table-column prop="name" label="星期日" ></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import upload from '~/components/upload.vue'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          time:'2019 第一周(01月01日~01月07日)',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          time:'2019 第二周(01月08日~01月14日)',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王五',
           time:'2019 第三周(01月15日~01月21日)',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '赵六',
           time:'2019 第四周(01月22日~01月28日)',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '马七',
           time:'2019 第五周(01月29日~02月04日)',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ],
      activeName: 'first',
      ts: this.newStore(),
      imgList: [],
      imgdata: {},
      editdata: {
        img: '',
        regionName: ''
      },
      showadd: false,
      showedit: false,
      filedata: {
        img: ''
      },
      imgname: ''
    }
  },
  components: {
    upload
  },
  created() {
    this.getimglist()
  },
  methods: {
    gopicpoint(id) {
      sessionStorage.setItem('id', '')
      sessionStorage.setItem('id', id)
      this.$router.push({
        name: 'index-picPoint',
        query: {
          id
        }
      })
    },
    deleteimg(id) {
      this.$confirm('此操作将永久删除图片及坐标数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.spost(this.ts, '/region/deleteregion', { id }).then(ts => {
            if (ts.d.res == 'false') {
              this.$message({
                type: 'error',
                message: ts.d.msg
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getimglist()
            }
            console.log(ts.d)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editimg(item) {
      console.log(item)
      this.imgdata = item
      this.editdata.id = item.id
      this.editdata.regionName = item.regionName
      this.editdata.img = item.imgpath

      this.showedit = true
    },
    saveeidt() {
      if (this.editdata.regionName == '') {
        this.$message({
          type: 'error',
          message: '请输入名称'
        })
        return
      }
      if (this.editdata.img == '') {
        this.$message({
          type: 'error',
          message: '请上传图片'
        })
        return
      }
      const res = {
        regionName: this.editdata.regionName,
        imgpath: this.editdata.img,
        id: this.editdata.id
      }
      this.spost(this.ts, '/region/updateregion', res).then(ts => {
        console.log(ts.d)
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.getimglist()
        this.showedit = false
      })
    },
    newimg2() {
      if (this.imgname == '') {
        this.$message({
          type: 'error',
          message: '请输入名称'
        })
        return
      }
      if (this.filedata.img == '') {
        this.$message({
          type: 'error',
          message: '请上传图片'
        })
        return
      }
      const res = {
        regionName: this.imgname,
        imgpath: this.filedata.img
      }
      this.spost(this.ts, '/region/addregion', res).then(ts => {
        console.log(ts.d)
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        this.getimglist()
        this.showadd = false
      })
    },
    getimglist() {
      const res = {}
      this.spost(this.ts, '/region/getall', res).then(ts => {
        console.log(ts.d)
        this.imgList = ts.d
      })
    },
    newimg() {
      this.filedata = {
        img: ''
      }
      this.imgname = ''
      this.showadd = true
    }
  }
}
</script>
<style>
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background: #111c3f
}
.el-dialog__headerbtn .el-dialog__close {
  color: #eaa03b;
  font-size: 30px;
  padding-right: 50px;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #ffae5e;
  color: #333;
}
.el-tabs--border-card > .el-tabs__header {
  background: rgba(8, 10, 14, 0);
}
.el-tabs--border-card {
  background: rgba(32, 44, 81, 0.4);
  border: 0;
}
.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.el-table th,
.el-table tr {
  background: inherit;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(12, 58, 108, 0.4);
}
.pbtn {
  display: flex;
  justify-content: center;
}
.el-dialog--center {
  background: url('../../static/img/diabg.png') no-repeat;
  background-size: contain;
}
.el-dialog__title {
  font-family: pmzd;
  font-size: 24px;
  color: #fff;
}
.block {
  width: 23%;
  margin: 1%;
  float: left;
}
.demonstration {
  text-align: center;
  display: block;
  line-height: 30px;
  height: 30px;
  color: #22ffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btncontent {
  display: flex;
  justify-content: space-around;
  margin: 5px 0;
}
.el-button {
  border: 0;
}
.el-button:focus,
.el-button:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  background-size: cover;
  border: 0;
  padding: 15px 36px;
  color: #fff;
}
.btnclass {
  padding: 13px 38px;
  background: url('../../static/img/btntable.png') no-repeat;
  color: #22ffff;
  line-height: 1;
}
.btnclass:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  border: 0;
  padding: 13px 38px;
  color: #fff;
}
.btnclass:last-child {
  background: url('../../static/img/btnerror.png') no-repeat;
}
</style>

